<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" href="layout/jquery-ui-2/menu.css" rel="stylesheet" />
<link href="layout/jquery-ui-1/css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" >
<link type="text/css" href="layout/my.css" rel="stylesheet" />

<script type="text/javascript" src="layout/jquery-ui-1/js/jquery-1.6.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="layout/jquery-ui-1/js/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="layout/jquery-ui-2/menu.js"></script>

<script>
	function request(x, y, status) {
		$("#div-result").hide();
		$("#loader").show();
		$("#loader").html("<img src='/TestClient/images/ajax-loader.gif' />");
		var action = "setByLocation";
		$.ajax({
			  type: 'POST',
			  url: "/TestClient/result",
			  data: {
				  "x" : x,
				  "y" : y,
				  "status" : status,
				  "action" : action
			  },
			  success: function(data) {		  	
				  	$("#msg").html(data.msg);
				  	$("#loader").hide();
				  	$("#div-result").show();
			  },
			  failure: function (data) {
				  alert("failure");		
			  }
			});
			return false;
	}
	$(function() {
			$("#submit-btn").button();
			$("#first span.bg").addClass("ui-corner-tl");
			$("#menu").css("position", "relative");
			$("#menu").css("top", "55px");
			$("#location-form").submit(function() {
			
			  var x =  $(this['latitude']).val(); 
			  var y = $(this['longitude']).val();
			  var status = $(this['status']).val();
			  request(x, y, status);
			  return false;
			});

	});
</script>	

<title>How's the weather</title>
</head>
<body style='background-image: url("images/sky.jpg"); z-index: 0;'>
	<div id="div-wrapper">
		<t:myNavigation/>
		<div id='div-main'>
			<div id='div-content'>
				<div id="div-address">
					<FORM id="location-form" >
						<div class ='prompt'> Please type your coordinates and the weather condition:</div>
						<div id='address-fields'>
							<input type="text" id = 'latitude' class = 'ui-corner-all' name="latitude" placeholder ="Latitude"/><br/>
							<input type="text" id = 'longitude' class = 'ui-corner-all' name="longitude" placeholder="Longitude"/><br/>
							<input type="text"  id = 'status' class = 'ui-corner-all' name="status" placeholder="Weather condition"/><br/>
							<input type=submit id="submit-btn" value="Get Weather" name="submit" style='margin-top: 10px;'>
						</div>
					</FORM>
				</div>	
				<div id="div-result">
					<div id='msg' style = 'font-size:18px;'></div>
				</div>				
			</div>
		</div>
		<a href="http://apycom.com/" style="visibility:none;"></a>
	</div>
</body>
</html>
